<!-- 首页卡片组件 -->
<template>
	<view class="cardView">
		<view @click="gotoSongList(item.id)" class="remd_li" v-for="item in reList" :key="item.id">
			<view class="remd_img">
				<image class="u-img" :src="item.picUrl" alt="" />
				<span class="u-earp remd_lnum">{{ num(item.playCount) }}</span>
				<i v-if="item.highQuality" class="remd_high"></i>
			</view>
			<span class="remd_text">{{ item.name }}</span>
		</view>
	</view>
</template>

<script>
import { numberFormat } from '@/utils/common';
import { recommendMusicAPI } from '@/api';
export default {
	name: 'CardView',
	data() {
		return {
			reList: [] // 推荐歌单数据
		};
	},
	computed: {
		//格式化数字
		num() {
			return (val) => {
				return numberFormat(val);
			};
		}
	},
	created() {
		recommendMusicAPI({ limit: 6 }).then((res) => {
			this.reList = res.result;
		});
	},
	methods: {
		gotoSongList(id) {
			uni.navigateTo({
				url: '/pages/SongList?id=' + id
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.cardView {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	.remd_li {
		width: 33%;
		margin-bottom: 16px;
		box-sizing: border-box;
		.remd_img {
			position: relative;
			padding-bottom: 100%;
			&::after {
				content: ' ';
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 20px;
				z-index: 2;
				background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
			}
			.u-img {
				position: absolute;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 1;
				vertical-align: middle;
			}
			.remd_lnum {
				position: absolute;
				right: 5px;
				top: 2px;
				z-index: 3;
				padding-left: 13px;
				color: #fff;
				font-size: 12px;
				background-position: 0;
				background-repeat: no-repeat;
				background-size: 11px 10px;
				shadow-color: 'rgba(0, 0, 0, 0.15)';
				shadow-offset-x: '1px';
				shadow-offset-y: '0';
				shadow-blur: '0px';
			}
			.u-earp {
				background-image: url('');
			}
			.remd_high {
				position: absolute;
				left: 0;
				top: 0;
				z-index: 5;
				width: 20px;
				height: 20px;
				background: url('') 0 no-repeat;
				background-size: contain;
			}
		}
		.remd_text {
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			padding: 6px 2px 0 6px;
			min-height: 30px;
			line-height: 1.2;
			font-size: 13px;
			color: #333;
		}
	}
}
</style>
